<script setup>
import { ref, defineOptions } from 'vue'
import TopTitle from "@/components/TopTitle.vue"
import TopicTtile from "@/components/TopicTtile.vue"
import { getTopic } from "@/api/getAxios_2.ts"
import { useRoute } from "vue-router"

const route = useRoute()
const tip = ref({})
const topic = ref([])

getTopic(route.query.id).then((res) => {
    // console.log(res);
    tip.value = res.data.data
    topic.value = res.data.data.lists

})

//***************************************** */

// 万和亿的换算
const getNumType = (num) => {
    if (num / 10000 >= 10000) {
        return (num / 100000000).toFixed(1) + '亿人气值'
    } else {
        return (num / 10000).toFixed(1) + '万人气值'
    }
}

//***************************************** */



</script>
<template>
    <div class="box">
        <TopTitle :flag="true" name="专题"></TopTitle>
        <img :src="tip.cover" alt="" class="bigImg">
        <h2>{{ tip.content }}</h2>
        <ul v-for="item in topic" class="totally">
            <TopicTtile :title="item.name"></TopicTtile>
            <li v-for="data in item.stories" @click="$router.push(`/BookInfo?storyId=${data.id}`)">
                <div class="storyImg">
                    <img :src="data.cover" alt="">
                </div>
                <div class="infoMsg">
                    <div class="name_person">
                        <h2>{{ data.name
                        }}</h2>
                        <div class="fire_person">
                            <span class="iconfont icon-fire"></span>
                            {{ getNumType(data.fireValue) }}
                        </div>
                    </div>
                    <div class="author_1">{{ data.authorName }} 著</div>
                    <div class="detail_1">{{ data.introduce }}</div>
                </div>
            </li>
        </ul>
    </div>
</template>

<style scoped lang='less'>
@import "//at.alicdn.com/t/c/font_4308477_5g7nf339e6o.css";

.box {
    background-color: #fff;

    .bigImg {
        width: 100%;
    }

    h2 {
        background-color: #fff;
        font-size: 20px;
        padding: 10px;
    }

    ul {
        // border-top: 1px solid #dc6f79;
        margin: 15px 10px;
        background-color: #fff;

        li {
            margin: 0 0;
            height: 34vw;
            display: flex;
            padding: 10px 0;
            border-bottom: 1px solid #eee;

            .storyImg {
                width: 25vw;
                height: 100%;
                border-radius: 10px;
                margin-right: 10px;
                box-shadow: 0px 15px 7px -11px rgba(0, 0, 0, .3);

                img {
                    border-radius: 10px;
                    width: 100%;
                    height: 100%;
                }
            }

            .infoMsg {
                display: flex;
                flex-direction: column;
                width: 68vw;

                .name_person {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 10px;

                    h2 {
                        width: 32vw;
                        font-size: 20px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        padding-left: 0;
                    }

                    .fire_person {
                        font-size: 14px;
                        color: #d7bf7c;

                        span {
                            // margin-right: 10px;
                            color: #cabc79;
                        }
                    }
                }

                .author_1 {
                    font-size: 14px;
                    margin-bottom: 10px;
                    color: #645c57;
                }

                .detail_1 {
                    overflow: hidden;
                    white-space: wrap;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    color: #3c3b41;
                }
            }
        }
    }
}
</style>